CSS சப்ஃகிரிட் பல்பரிமாணம்: சிக்கலான கிரிட் மரபுரிமையைக் கட்டவிழ்த்தல்

CSS கிரிட் தளவமைப்பு வலை வடிவமைப்பில் ஒரு புரட்சியை ஏற்படுத்தியுள்ளது, இது பக்க கட்டமைப்பின் மீது இணையற்ற கட்டுப்பாட்டை வழங்குகிறது. இருப்பினும், தளவமைப்புகள் மிகவும் சிக்கலானதாக மாறும்போது, ​​மேம்பட்ட நுட்பங்களின் தேவை எழுகிறது. CSS சப்ஃகிரிட்டை உள்ளிடவும், இது கிரிட் தளவமைப்பை மேம்படுத்தும் ஒரு சக்திவாய்ந்த அம்சமாகும். இது கிரிட் உருப்படிகள் அவற்றின் பெற்றோர் கிரிட்டின் டிராக் வரையறைகளை மரபுரிமையாகப் பெற உதவுகிறது. இது உண்மையிலேயே பல்பரிமாண தளவமைப்புகளுக்கான திறனைத் திறக்கிறது, அங்கு கூறுகள் ஒட்டுமொத்த கிரிட் அமைப்புடன் சீரமைப்பை பராமரிக்கும் போது வரிசைகள் மற்றும் நெடுவரிசைகளில் பரவலாம்.

CSS கிரிட் தளவமைப்பைப் புரிந்துகொள்ளுதல்: ஒரு விரைவான மீள்பார்வை

சப்ஃகிரிட்டிற்குள் நுழைவதற்கு முன், CSS கிரிட் தளவமைப்பின் முக்கிய கருத்துக்களை சுருக்கமாக மதிப்பாய்வு செய்வோம்:

• கிரிட் கண்டெய்னர்: display: grid அல்லது display: inline-grid ஐப் பயன்படுத்தி கிரிட் சூழலை நிறுவும் பெற்றோர் உறுப்பு.
• கிரிட் ஐட்டங்கள்: கிரிட் கண்டெய்னரின் நேரடி குழந்தைகள், அவை கிரிட்டிற்குள் நிலைநிறுத்தப்பட்டுள்ளன.
• கிரிட் டிராக்குகள்: கிரிட்டின் வரிசைகள் மற்றும் நெடுவரிசைகள், grid-template-rows மற்றும் grid-template-columns போன்ற பண்புகளால் வரையறுக்கப்படுகின்றன. இவை வரிசைகள் மற்றும் நெடுவரிசைகளின் அளவு மற்றும் எண்ணிக்கையை வரையறுக்கின்றன.
• கிரிட் கோடுகள்: கிரிட் டிராக்குகளைப் பிரிக்கும் கிடைமட்ட மற்றும் செங்குத்து கோடுகள். அவை 1 இலிருந்து தொடங்கி எண்ணிடப்பட்டுள்ளன.
• கிரிட் பகுதிகள்: grid-template-areas மூலம் வரையறுக்கப்பட்ட கிரிட்டிற்குள் பெயரிடப்பட்ட பகுதிகள்.

இந்த அடிப்படைகளுடன், நாம் CSS சப்ஃகிரிட்டின் சிக்கல்களையும் நன்மைகளையும் ஆராயலாம்.

CSS சப்ஃகிரிட் அறிமுகம்: கிரிட் டிராக்குகளை மரபுரிமையாகப் பெறுதல்

சப்ஃகிரிட் ஒரு கிரிட் உருப்படியை ஒரு கிரிட் கண்டெய்னராக மாற்ற அனுமதிக்கிறது, அதன் பெற்றோர் கிரிட்டிலிருந்து வரிசை மற்றும்/அல்லது நெடுவரிசை டிராக்குகளை மரபுரிமையாகப் பெறுகிறது. இதன் பொருள், சப்ஃகிரிட் அதன் உள்ளடக்கங்களை பெற்றோர் கிரிட்டின் கோடுகளுடன் சீரமைக்க முடியும், இது ஒரு ஒத்திசைவான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய தளவமைப்பை உருவாக்குகிறது, குறிப்பாக பெற்றோர் கிரிட்டில் பல வரிசைகள் அல்லது நெடுவரிசைகளில் பரவியுள்ள கூறுகளுடன் கையாளும் போது.

சப்ஃகிரிட்டை இயக்க முக்கிய பண்பு grid-template-rows: subgrid மற்றும்/அல்லது grid-template-columns: subgrid ஆகும். ஒரு கிரிட் உருப்படிக்கு பயன்படுத்தும்போது, இந்தப் பண்புகள் உலாவியை பெற்றோர் கிரிட்டிலிருந்து தொடர்புடைய டிராக்குகளைப் பயன்படுத்தச் சொல்கின்றன.

அடிப்படை சப்ஃகிரிட் செயலாக்கம்

ஒரு எளிய உதாரணத்தைக் கருத்தில் கொள்வோம்:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto auto auto;
}

.grid-item {
 /* கிரிட் உருப்படிகளுக்கான ஸ்டைல்கள் */
}

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
}

இந்த எடுத்துக்காட்டில், .grid-container மூன்று நெடுவரிசைகள் மற்றும் மூன்று வரிசைகளைக் கொண்ட பிரதான கிரிட் கட்டமைப்பை வரையறுக்கிறது. .subgrid-item என்பது .grid-container க்குள் உள்ள ஒரு கிரிட் உருப்படி, இது அதன் நெடுவரிசைகளுக்கு சப்ஃகிரிட்டைப் பயன்படுத்த கட்டமைக்கப்பட்டுள்ளது. இதன் பொருள் .subgrid-item க்குள் உள்ள நெடுவரிசைகள் .grid-container இன் நெடுவரிசைகளுடன் சரியாக சீரமைக்கப்படும்.

சப்ஃகிரிட் மூலம் பல்பரிமாண தளவமைப்புகள்

பல்பரிமாண தளவமைப்புகளை உருவாக்கும் போது சப்ஃகிரிட்டின் உண்மையான சக்தி வெளிப்படுகிறது. இந்த தளவமைப்புகளில் கூறுகள் பல வரிசைகள் மற்றும் நெடுவரிசைகளில் பரவியிருக்கும் உள்ளமைக்கப்பட்ட கிரிட்கள் அடங்கும், மற்றும் சீரமைப்பு மிகவும் முக்கியமானது.

எடுத்துக்காட்டு: ஒரு சிக்கலான தயாரிப்பு அட்டை

ஒரு படம், தலைப்பு, விளக்கம் மற்றும் சில கூடுதல் தகவல்களைக் காட்ட வேண்டிய ஒரு தயாரிப்பு அட்டையை கற்பனை செய்து பாருங்கள். தளவமைப்பு நெகிழ்வானதாகவும் பதிலளிக்கக்கூடியதாகவும் இருக்க வேண்டும், வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு மாற்றியமைக்கப்பட வேண்டும்.

.product-card {
 display: grid;
 grid-template-columns: 1fr 2fr;
 grid-template-rows: auto auto auto;
 gap: 10px;
}

.product-image {
 grid-row: 1 / span 2;
}

.product-details {
 display: grid;
 grid-template-columns: subgrid;
 grid-template-rows: auto auto;
}

.product-title {
 /* தலைப்புக்கான ஸ்டைல்கள் */
}

.product-description {
 /* விளக்கத்திற்கான ஸ்டைல்கள் */
}

.additional-info {
 grid-column: 1 / -1; /* தயாரிப்பு அட்டையில் உள்ள அனைத்து நெடுவரிசைகளையும் நீட்டிக்கவும் */
}

இந்த எடுத்துக்காட்டில்:

• .product-card பிரதான கிரிட் கண்டெய்னர் ஆகும்.
• .product-image முதல் இரண்டு வரிசைகளில் பரவியுள்ளது.
• .product-details என்பது ஒரு சப்ஃகிரிட் ஆகும், இது .product-card இலிருந்து நெடுவரிசை டிராக்குகளை மரபுரிமையாகப் பெறுகிறது, அதன் உள்ளடக்கங்கள் பிரதான கிரிட்டின் நெடுவரிசைகளுடன் சீரமைக்கப்படுவதை உறுதி செய்கிறது.
• .additional-info தயாரிப்பு அட்டையின் அனைத்து நெடுவரிசைகளிலும் பரவியுள்ளது, படம் மற்றும் விவரங்களுக்குக் கீழே கூடுதல் தகவல்களைச் சேர்க்கிறது.

இந்த அமைப்பு தயாரிப்பு அட்டைக்கு நெகிழ்வான மற்றும் பராமரிக்கக்கூடிய தளவமைப்பை வழங்குகிறது. சப்ஃகிரிட், .product-details க்குள் உள்ள தலைப்பு மற்றும் விளக்கம் பிரதான கிரிட்டின் நெடுவரிசை அமைப்புடன் சரியாக சீரமைக்கப்படுவதை உறுதி செய்கிறது.

எடுத்துக்காட்டு: ஒரு சிக்கலான அட்டவணை தளவமைப்பு

இணைக்கப்பட்ட செல்களுடன் கூடிய அட்டவணைகள் ஒரு தளவமைப்பு கனவாக இருக்கலாம். சப்ஃகிரிட் இதை மிகவும் எளிதாக்குகிறது.

.table-container {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 grid-template-rows: auto auto auto;
}

.header-cell {
 grid-column: span 2; /* எடுத்துக்காட்டு: இரண்டு நெடுவரிசைகளில் பரவியுள்ள செல் */
}

.subgrid-row {
 display: grid;
 grid-template-columns: subgrid;
}

.data-cell {
 /* தரவு செல்களுக்கான ஸ்டைல்கள் */
}

இங்கே, .table-container ஒட்டுமொத்த அட்டவணை கிரிட்டை வரையறுக்கிறது. `header-cell` கூறுகள் பல நெடுவரிசைகளில் பரவக்கூடும். `subgrid-row` சப்ஃகிரிட்டைப் பயன்படுத்தி அனைத்து `data-cell` கூறுகளும் பெற்றோர் கிரிட்டில் வரையறுக்கப்பட்ட நெடுவரிசைகளுடன் சரியாக சீரமைக்கப்படுவதை உறுதி செய்கிறது, தலைப்பு செல் பரவல்களைப் பொருட்படுத்தாமல்.

CSS சப்ஃகிரிட்டைப் பயன்படுத்துவதன் நன்மைகள்

• மேம்பட்ட தளவமைப்புக் கட்டுப்பாடு: சப்ஃகிரிட் உறுப்பு நிலைப்படுத்தல் மற்றும் சீரமைப்பு மீது நுணுக்கமான கட்டுப்பாட்டை வழங்குகிறது, குறிப்பாக சிக்கலான தளவமைப்புகளில்.
• எளிமைப்படுத்தப்பட்ட குறியீடு: இது சிக்கலான கணக்கீடுகள் மற்றும் கைமுறை சரிசெய்தல்களின் தேவையை குறைக்கிறது, இது சுத்தமான மற்றும் பராமரிக்க எளிதான குறியீட்டிற்கு வழிவகுக்கிறது.
• மேம்படுத்தப்பட்ட பதிலளிக்கக்கூடிய தன்மை: சப்ஃகிரிட் மேலும் நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்புகளை அனுமதிக்கிறது, அவை வெவ்வேறு திரை அளவுகளுக்கு தடையின்றி மாற்றியமைக்கப்படுகின்றன.
• அதிக நிலைத்தன்மை: ஒட்டுமொத்த கிரிட் அமைப்புடன் சீரமைப்பைப் பராமரிப்பதன் மூலம் ஒரு வலைத்தளத்தின் வெவ்வேறு பிரிவுகளில் காட்சி நிலைத்தன்மையை உறுதி செய்கிறது.
• சிறந்த பராமரிப்புத்திறன்: பெற்றோர் கிரிட்டில் செய்யப்படும் மாற்றங்கள் தானாகவே சப்ஃகிரிட்களுக்குப் பரவுகின்றன, இது தளவமைப்பு சரிசெய்தல்களை எளிதாக்குகிறது மற்றும் பிழைகளின் அபாயத்தைக் குறைக்கிறது.

உலாவி இணக்கத்தன்மை

CSS சப்ஃகிரிட்டிற்கான உலாவி ஆதரவு இப்போது Chrome, Firefox, Safari, மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளில் பரவலாகக் கிடைக்கிறது. இருப்பினும், உங்கள் இலக்கு பார்வையாளர்களுக்கு போதுமான உலாவி ஆதரவு உள்ளதா என்பதை உறுதிப்படுத்த Can I use போன்ற வலைத்தளங்களில் தற்போதைய உலாவி இணக்கத்தன்மை அட்டவணையை சரிபார்ப்பது அவசியம்.

சப்ஃகிரிட்டை ஆதரிக்காத பழைய உலாவிகளுக்கு, பின்வரும் பின்னடைவு உத்திகளைக் கருத்தில் கொள்ளுங்கள்:

• சப்ஃகிரிட் இல்லாத CSS கிரிட்: நிலையான CSS கிரிட் அம்சங்களைப் பயன்படுத்தி தளவமைப்பை மீண்டும் உருவாக்கவும், இதற்கு அதிக கைமுறை சரிசெய்தல்கள் தேவைப்படலாம்.
• Flexbox: எளிய தளவமைப்புகளுக்கு Flexbox ஐ ஒரு பின்னடைவாகப் பயன்படுத்தவும்.
• அம்ச வினவல்கள்: சப்ஃகிரிட் ஆதரவைக் கண்டறிந்து அதற்கேற்ப வெவ்வேறு ஸ்டைல்களைப் பயன்படுத்த @supports ஐப் பயன்படுத்தவும்.

CSS சப்ஃகிரிட்டைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

• உங்கள் கிரிட் கட்டமைப்பைத் திட்டமிடுங்கள்: சப்ஃகிரிட்டை செயல்படுத்துவதற்கு முன், உங்கள் கிரிட் கட்டமைப்பை கவனமாக திட்டமிட்டு, சப்ஃகிரிட் மிகவும் பயனுள்ளதாக இருக்கும் பகுதிகளை அடையாளம் காணவும்.
• அர்த்தமுள்ள கிளாஸ் பெயர்களைப் பயன்படுத்தவும்: குறியீட்டின் வாசிப்புத்திறன் மற்றும் பராமரிப்புத்திறனை மேம்படுத்த விளக்கமான கிளாஸ் பெயர்களைப் பயன்படுத்தவும்.
• அதிகப்படியான உள்ளமைப்பைத் தவிர்க்கவும்: சப்ஃகிரிட் உள்ளமைக்கப்பட்ட கிரிட்களை அனுமதிக்கும் அதே வேளையில், அதிகப்படியான உள்ளமைப்பைத் தவிர்க்கவும், ஏனெனில் இது தளவமைப்பை நிர்வகிப்பதை கடினமாக்கும்.
• முழுமையாக சோதிக்கவும்: உங்கள் தளவமைப்பு வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் சரியாக மற்றும் பதிலளிக்கக்கூடிய வகையில் செயல்படுகிறதா என்பதை உறுதிப்படுத்த சோதிக்கவும்.
• பின்னடைவுகளை வழங்கவும்: சப்ஃகிரிட்டை ஆதரிக்காத பழைய உலாவிகளுக்கு பின்னடைவு உத்திகளை செயல்படுத்தவும்.
• அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: உங்கள் தளவமைப்பு ஊனமுற்ற பயனர்களுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிப்படுத்தவும். சொற்பொருள் HTML ஐப் பயன்படுத்தவும் மற்றும் படங்களுக்கு மாற்று உரையை வழங்கவும்.
• செயல்திறனுக்காக மேம்படுத்தவும்: உகந்த செயல்திறனை உறுதிப்படுத்த கிரிட் உருப்படிகளின் எண்ணிக்கையைக் குறைத்து, சிக்கலான கணக்கீடுகளைத் தவிர்க்கவும்.

மேம்பட்ட சப்ஃகிரிட் நுட்பங்கள்

சப்ஃகிரிட்டில் டிராக்குகளை விரிவுபடுத்துதல்

சாதாரண கிரிட் தளவமைப்பைப் போலவே, ஒரு உருப்படியை சப்ஃகிரிட்டிற்குள் பல டிராக்குகளில் பரவச் செய்ய grid-column: span X அல்லது grid-row: span Y ஐப் பயன்படுத்தலாம்.

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
}

.spanning-item {
 grid-column: span 2;
}

இது .spanning-item ஐ சப்ஃகிரிட்டிற்குள் இரண்டு நெடுவரிசை டிராக்குகளை ஆக்கிரமிக்கச் செய்யும்.

பெயரிடப்பட்ட கிரிட் கோடுகளைப் பயன்படுத்துதல்

நீங்கள் பெற்றோர் கிரிட்டில் பெயரிடப்பட்ட கிரிட் கோடுகளைப் பயன்படுத்தலாம் மற்றும் அவற்றை சப்ஃகிரிட்டில் குறிப்பிடலாம். இது உங்கள் குறியீட்டை மேலும் படிக்கக்கூடியதாகவும் பராமரிக்க எளிதாகவும் மாற்றும்.

.grid-container {
 display: grid;
 grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
}

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
}

.positioned-item {
 grid-column: content-start / content-end;
}

இந்த எடுத்துக்காட்டில், .positioned-item ஆனது content-start மற்றும் content-end எனப் பெயரிடப்பட்ட கிரிட் கோடுகளுக்கு இடையில் வைக்கப்படும்.

ஆட்டோ-பிளேஸ்மென்ட்டுடன் சப்ஃகிரிட்டை இணைத்தல்

சப்ஃகிரிட்டிற்குள் உருப்படிகள் தானாக எவ்வாறு வைக்கப்படுகின்றன என்பதைக் கட்டுப்படுத்த சப்ஃகிரிட்டை grid-auto-flow பண்புடன் இணைக்கலாம்.

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
 grid-auto-flow: row dense;
}

இது உலாவியை சப்ஃகிரிட்டில் உருப்படிகளை தானாக வைக்கச் செய்யும், எந்த இடைவெளிகளையும் நிரப்பி, மேலும் கச்சிதமான தளவமைப்பை உருவாக்கும்.

சப்ஃகிரிட்டின் நிஜ உலக எடுத்துக்காட்டுகள்

டாஷ்போர்டு தளவமைப்புகள்

டாஷ்போர்டுகளுக்கு பெரும்பாலும் பல பிரிவுகள் மற்றும் கூறுகளுடன் சிக்கலான தளவமைப்புகள் தேவைப்படுகின்றன. முழு டாஷ்போர்டுக்கும் ஒரு நிலையான மற்றும் பதிலளிக்கக்கூடிய கிரிட் கட்டமைப்பை உருவாக்க சப்ஃகிரிட்டைப் பயன்படுத்தலாம், எல்லா கூறுகளும் சரியாக சீரமைக்கப்படுவதை உறுதி செய்கிறது.

உதாரணமாக, ஒரு பக்கப்பட்டி, முக்கிய உள்ளடக்கப் பகுதி மற்றும் அடிக்குறிப்புடன் கூடிய டாஷ்போர்டைக் கருத்தில் கொள்ளுங்கள். இந்த ஒவ்வொரு பிரிவிலும் உள்ள உள்ளடக்கத்தை டாஷ்போர்டின் ஒட்டுமொத்த கிரிட் அமைப்புடன் சீரமைக்க சப்ஃகிரிட்டைப் பயன்படுத்தலாம்.

பத்திரிக்கை தளவமைப்புகள்

பத்திரிக்கை தளவமைப்புகள் பொதுவாக படங்கள், உரை மற்றும் பிற கூறுகளை பார்வைக்கு ஈர்க்கும் வகையில் அமைக்கப்பட்ட சிக்கலான வடிவமைப்புகளைக் கொண்டுள்ளன. பத்திரிக்கை தளவமைப்பிற்கு நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய கிரிட் கட்டமைப்பை உருவாக்க சப்ஃகிரிட்டைப் பயன்படுத்தலாம், இது டைனமிக் உள்ளடக்க இடம் மற்றும் சீரமைப்பை அனுமதிக்கிறது.

ஒரு முக்கிய கட்டுரை, பக்கப்பட்டிகள் மற்றும் விளம்பரங்களைக் கொண்ட ஒரு பத்திரிக்கை தளவமைப்பை கற்பனை செய்து பாருங்கள். இந்த ஒவ்வொரு பிரிவிலும் உள்ள உள்ளடக்கத்தை பத்திரிக்கையின் ஒட்டுமொத்த கிரிட் அமைப்புடன் சீரமைக்க சப்ஃகிரிட்டைப் பயன்படுத்தலாம்.

இ-காமர்ஸ் தயாரிப்புப் பட்டியல்கள்

இ-காமர்ஸ் வலைத்தளங்கள் பெரும்பாலும் தயாரிப்புப் பட்டியல்களை ஒரு கிரிட் வடிவத்தில் காண்பிக்கின்றன. தயாரிப்புப் பட்டியல்களுக்கு ஒரு நிலையான மற்றும் பதிலளிக்கக்கூடிய கிரிட் கட்டமைப்பை உருவாக்க சப்ஃகிரிட்டைப் பயன்படுத்தலாம், எல்லா தயாரிப்பு அட்டைகளும் சரியாக சீரமைக்கப்படுவதையும் வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு மாற்றியமைக்கப்படுவதையும் உறுதி செய்கிறது.

ஒரு படம், தலைப்பு, விளக்கம் மற்றும் விலை ஆகியவற்றைக் கொண்ட பல தயாரிப்பு அட்டைகளைக் கொண்ட ஒரு தயாரிப்புப் பட்டியல் பக்கத்தைக் கருத்தில் கொள்ளுங்கள். ஒவ்வொரு தயாரிப்பு அட்டைக்குள் உள்ள கூறுகளை தயாரிப்புப் பட்டியல் பக்கத்தின் ஒட்டுமொத்த கிரிட் அமைப்புடன் சீரமைக்க சப்ஃகிரிட்டைப் பயன்படுத்தலாம்.

CSS கிரிட் மற்றும் சப்ஃகிரிட்டின் எதிர்காலம்

CSS கிரிட் தளவமைப்பு மற்றும் சப்ஃகிரிட் தொடர்ந்து உருவாகி வருகின்றன, புதிய அம்சங்கள் மற்றும் மேம்பாடுகள் தொடர்ந்து சேர்க்கப்படுகின்றன. உலாவி ஆதரவு தொடர்ந்து மேம்படுவதால், இந்த தொழில்நுட்பங்கள் நவீன மற்றும் பதிலளிக்கக்கூடிய வலை தளவமைப்புகளை உருவாக்குவதற்கு இன்னும் அவசியமானதாக மாறும்.

CSS கிரிட் மற்றும் சப்ஃகிரிட்டின் எதிர்காலம் பின்வருவனவற்றை உள்ளடக்கியிருக்கலாம்:

• மேம்படுத்தப்பட்ட செயல்திறன்: கிரிட் மற்றும் சப்ஃகிரிட் தளவமைப்புகளின் ரெண்டரிங் செயல்திறனை மேம்படுத்துவதற்கான மேம்படுத்தல்கள்.
• மேலும் மேம்பட்ட அம்சங்கள்: தளவமைப்பு மற்றும் சீரமைப்பு மீது இன்னும் ಹೆಚ್ಚಿನ கட்டுப்பாட்டை வழங்க புதிய அம்சங்கள்.
• பிற வலை தொழில்நுட்பங்களுடன் சிறந்த ஒருங்கிணைப்பு: வலை கூறுகள் மற்றும் ஜாவாஸ்கிரிப்ட் கட்டமைப்புகள் போன்ற பிற வலை தொழில்நுட்பங்களுடன் தடையற்ற ஒருங்கிணைப்பு.

முடிவுரை: சப்ஃகிரிட்டின் ஆற்றலைத் தழுவுங்கள்

CSS சப்ஃகிரிட் என்பது மேம்பட்ட கிரிட் மரபுரிமையுடன் சிக்கலான, பல்பரிமாண தளவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். கிரிட் தளவமைப்பின் அடிப்படைகள் மற்றும் சப்ஃகிரிட்டின் திறன்களைப் புரிந்துகொள்வதன் மூலம், நீங்கள் வலை வடிவமைப்பிற்கான புதிய சாத்தியங்களைத் திறக்கலாம் மற்றும் மேலும் பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் பதிலளிக்கக்கூடிய வலைத்தளங்களை உருவாக்கலாம்.

சப்ஃகிரிட்டிற்கான உலாவி ஆதரவு தொடர்ந்து மேம்படுவதால், இது வலை உருவாக்குநரின் கருவித்தொகுப்பின் பெருகிய முறையில் முக்கியமான பகுதியாக மாறும். எனவே, சப்ஃகிரிட்டின் ஆற்றலைத் தழுவி, அற்புதமான மற்றும் புதுமையான வலை தளவமைப்புகளை உருவாக்க அதன் திறன்களுடன் பரிசோதனை செய்யத் தொடங்குங்கள்.

CSS சப்ஃகிரிட்டின் முழுத் திறனையும் பரிசோதிக்கவும் ஆராயவும் பயப்பட வேண்டாம். சாத்தியக்கூறுகள் பரந்தவை, மற்றும் முடிவுகள் உண்மையிலேயே ஈர்க்கக்கூடியதாக இருக்கும். மகிழ்ச்சியான குறியீட்டு முறை!

மேலும் அறிய உதவும் ஆதாரங்கள்

• MDN வலை ஆவணங்கள்: CSS சப்ஃகிரிட் தளவமைப்பு
• CSS-Tricks: சப்ஃகிரிட் ஃபயர்பாக்ஸிற்கு வருகிறது
• உதாரணம் மூலம் கிரிட்